<template>
  <el-card :id="jobInfo_id" class="box-card" style="cursor:pointer;margin-bottom: 20px;" @click="goto_detail">
    <el-row>
      <el-col :span="1">
        <div class="grid-content "></div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content ">
          <div class="box-header-style">
            <el-row>
              <el-col :span="18">
                <p class="title-style">{{ title }}</p>
              </el-col>
              <el-col :span="6">
                <p class="money-style">{{ money }}</p>
              </el-col>
            </el-row>
          </div>

          <el-divider style="margin-top: 13px;margin-bottom: 13px;padding: 1px;background: #aaf39d;"></el-divider>

          <el-row class="biaoqian-style">
            <el-tag  style="margin-right: 15px;" v-for="i in tap_infos" size="small" type="success">{{i}}</el-tag>
          </el-row>

        </div>
      </el-col>
      <el-col :span="2"></el-col>

      <el-col :span="8">
        <div>
          <p class="text-style">{{ content }}
            <el-divider style="padding: 0.5px;background: #a4d6a7;" direction="vertical"></el-divider>
            {{ experience }}
            <el-divider style="padding: 0.5px;background: #a4d6a7;" direction="vertical"></el-divider>
            {{ education }}
          </p>
          <div class="info">
            <p>{{ author }}</p>

            <p>{{ times }}</p>
          </div>
        </div>


      </el-col>
    </el-row>
  </el-card>
</template>

<script>
export default {
  name: 'JobInfoCard',
  data () {
    return {
      // title:"标题",
      // content:"这是内容",
      //experience:"经验",
      //education:"学历"
      // author:"作者",
      // times:"时间",
      // img_src:require('@/assets/test1.jpg'),
      //jobInfo_id:"招聘信息编号"
      //tap_infos:"标签信息"
    }
  },
  props: ['title', 'content', 'author', 'times', 'img_src', 'experience', 'education', 'money', 'jobInfo_id','tap_infos'],

  methods: {
    goto_detail () {

      if (localStorage.getItem('Token')) {2
        sessionStorage.setItem("YHauthor",this.author)
        sessionStorage.setItem("YHJobInfo_id",this.jobInfo_id)
        sessionStorage.setItem("YHJob_title",this.title)
        sessionStorage.setItem("YHJob_money",this.money)
        sessionStorage.setItem("YHJob_content",this.content)
        sessionStorage.setItem("YHJob_experience",this.experience)
        sessionStorage.setItem("YHJob_education",this.education)
        this.$router.push('/DetailJobInfo')
      } else {
        this.$router.push('/weblogin')
      }
    },
  }
}
</script>

<style scoped>
.box-card {
  height: 125px;
  border-style: solid;
  border-width: 4px;
  border-color: #ffffff;
}

.box-header-style {
  margin: 0;
}

.title-style {
  margin: 0;
  font-family: 'Roboto',sans-serif;
  font-size: 24px;
  font-weight: bolder;
  color: #369a00;
}

.money-style {
  margin: 0;
  font-family: "黑体";
  font-size: 25px;
  color: #ff6600;
  font-weight: bolder;
}

.info p {
  float: left;
  margin: 0px;
}

.info {
  margin: 0px;
  font-size: 15px;
  color: #787878;
}

.text-style {
  padding-bottom: 20px;
  color: #000000;
  margin: 0;
  font-family: "微软雅黑";
  font-size: 18px;
  width: 100%;
  height: 30px;
}

.box-card:Hover {
  border-color: #A5D6A7;
}

.biaoqian-style {
  width: 100%;
  left: 15px;
  position: relative;
  padding-bottom: 15px;
}
</style>

